<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Complaint Manager</title>

<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<link href="css/iconFont.css" rel="stylesheet">
<link href="css/cmp.css" rel="stylesheet">

<!-- Load JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.widget.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/prettify.js"></script>
<script src="js/login.js"></script>
<script src="js/user.js"></script>
<script src="js/dept.js"></script>
<script src="js/admin.js"></script>
<script src="js/load-metro.js"></script>
<script src="js/docs.js"></script>
<script src="js/metro-datepicker.js"></script>

<!-- Load Chart JavaScript Libraries -->
<script src="js/amcharts.js"></script>
<script src="js/pie.js"></script>

<style type="text/css">
#chartdiv {
	width: 100%;
	height: 500px;
	font-size: 11px;
}
</style>

<script type="text/javascript">
	$(document).ready(function() {
		console.log("login v");
		dispLoginView();

	});
</script>

</head>
<body class="metro">

	<!-- --------------------------------------------------------------------NAV BAR START--------------------------------------------------->
	<header>
		<nav class="navigation-bar bg-lightBlue fixed-top ">
			<nav class="navigation-bar-content">
				<div class="element">COMPLAINT MANAGER</div>

				<span class="element-divider"></span> <a class="element brand"
					href="#" onClick="window.location.reload()"><span class="icon-spin"></span></a> <span
					class="element-divider"></span>

				<div class="element" id="dispCurrUser" style="display: none">
					<a class="dropdown-toggle" id="dispLoginId" href="#"> <span
						class="icon-cog"></span>
					</a>
					<ul class="dropdown-menu bg-lightBlue" data-role="dropdown">
						<li><a onclick="logout()">Logout</a></li>
					</ul>
				</div>

			</nav>
		</nav>
	</header>
	<!-- --------------------------------------------------------------------NAV BAR END    --------------------------------------------------->

	<div id="" class="container">

		<div class="grid">
			<div class="row">

				<!-- --------------------------------------------------------------------SIDE BAR START    --------------------------------------------------->
				<nav class="fixed-top">
					<div class="span2" id="sidebar">
						<div class="row">
							<button class="shortcut warning" id="SideBarButton1">
								<p id="b1txt">Login</p>
							</button>
						</div>
						<div class="row">
							<button class="shortcut info" id="SideBarButton2">
								<p id="b2txt">Create User</p>
							</button>
						</div>
						<div class="row">
							<button class="shortcut info" id="SideBarButton3">
								<p id="b3txt">Create Dept</p>
							</button>
						</div>
						<div class="row">
							<button class="shortcut info" id="SideBarButton4">
								<p id="b4txt">
							</button>
						</div>

					</div>
				</nav>

				<!-- --------------------------------------------------------------------SIDE BAR END    --------------------------------------------------->

				<!-- --------------------------------------------------------------------DISPLAY CONTAINER START--------------------------------------------------->

				<div class="span10" id="dispCont">


					<!-- -----------------------------------------LOGIN------------------------------------------------------------------------------>

					<div class=grid id="LoginCreateUser" style="display: none">
						<div class=row>
							<form id="createUser">
								<fieldset>
									<legend>User Details</legend>
									<label>Name</label>
									<div class="input-control text" data-role="input-control">
										<input name="name" type="text" placeholder="enter name">
										<button class="btn-clear" tabindex="-1" type="button"></button>
									</div>
									<label>Date of Birth</label>
									<div class="input-control text" id="datepicker">
										<input type="text" name="dob">
										<button class="btn-date"></button>
									</div>
									<label>Address</label>
									<div class="input-control text" data-role="input-control">
										<input name="address" type="text" placeholder="enter address">
										<button class="btn-clear" tabindex="-1" type="button"></button>
									</div>
									<label>Phone number</label>
									<div class="input-control text" data-role="input-control">
										<input name="phone_no" type="text" placeholder="enter phone number">
										<button class="btn-clear" tabindex="-1" type="button"></button>
									</div>
									<label>Password</label>
									<div class="input-control password" data-role="input-control">
										<input name="pwd" type="password" placeholder="enter password"
											autofocus="">
										<button class="btn-reveal" tabindex="-1" type="button"></button>
									</div>

									<input type="submit" value="Submit">
								</fieldset>
							</form>
						</div>
					</div>

					<!-- ----------------------------------------------------------------------------------------------------------------------->

					<div class=grid id="LoginCreateDept" style="display: none">
						<div class=row>
							<form id="createDept">
								<fieldset>
									<legend>Dept Details</legend>
									<label>Department Name</label>
									<div class="input-control text" data-role="input-control">
										<input name="dept_name" type="text" placeholder="enter department name">
										<button class="btn-clear" tabindex="-1" type="button"></button>
									</div>
									<label>Password</label>
									<div class="input-control password" data-role="input-control">
										<input name="dept_pwd" type="password"
											placeholder="type password" autofocus="">
										<button class="btn-reveal" tabindex="-1" type="button"></button>
									</div>

									<input type="submit" value="Submit">
								</fieldset>
							</form>
						</div>
					</div>

					<!-- ----------------------------------------------------------------------------------------------------------------------->

					<!-- ------------------------------------------------------- -->

					<div class=grid id="DivUserCreateComplaint" style="display: none">
						<div class=row>
							<form id="createcomp">
								<fieldset>
									<legend>Complaint Details</legend>
									<label>Department</label>
									<div class="input-control select">
										<select name="did" id="departmentselect">
										</select>
									</div>
									<label>Location</label>
									<div class="input-control text" data-role="input-control">
										<input name="location" type="text" placeholder="enter location"
											id="inputLocation">
									</div>
									<label>Description</label>
									<div class="input-control textarea">
										<textarea name="desc" placeholder="enter description"
											id="textareaDescription"></textarea>
									</div>

									<input type="submit" value="Submit">
								</fieldset>
							</form>
						</div>
					</div>

					<!-- ------------------------------------------------------- -->

					<div class="grid" id="divLogin">
						<div class="row">
							<div class="span2"></div>
							<div class="span4">
								<h1 id="loginheader" class="text-center">Login</h1>
								<form id="userlogin">
									<fieldset>

										<label>User Id</label>
										<div class="input-control text" data-role="input-control">
											<input name="id" type="text" placeholder="type id">
											<button class="btn-clear" tabindex="-1" type="button"></button>
										</div>
										<label>Password</label>
										<div class="input-control password" data-role="input-control">
											<input name="pwd" type="password" placeholder="type password"
												autofocus="">
											<button class="btn-reveal" tabindex="-1" type="button"></button>
										</div>

										<input type="submit" value="Submit">
									</fieldset>
								</form>



							</div>
							<div class="span2"></div>
						</div>

					</div>


					<!-- 					<div class=grid id="UserDivCreateComplaint" style="display: none">
						<div class=row>
							<form id="createcomp">
								<fieldset>
									<legend>Complaint Details</legend>
									<label>Department</label>
									<div class="input-control select">
										<select name="did" id="departmentselect">
										</select>
									</div>
									<label>Location</label>
									<div class="input-control text" data-role="input-control">
										<input name="location" type="text" placeholder="enter location" id="inputLocation">
										<button class="btn-clear" tabindex="-1" type="button"></button>
									</div>
									<label>Description</label>
									<div class="input-control textarea">
										<textarea name="desc" placeholder="enter description" id="textareaDescription"></textarea>
									</div>

									<input type="submit" value="Submit">
								</fieldset>
							</form>
						</div>
					</div> -->



					<!-- ------------------------------------------- -->

					<div class="grid" id="divChartContainer" style="display: none">
						<div class="row">
							<div class="span12">
								<div id="chartdiv"></div>
							</div>
						</div>
					</div>


					<!----------------------------------------------  -->


					<div class=grid id="divSearchComplaint" style="display: none">
						<div class=row>
							<form id="searchComplaint">
								<fieldset>
									<legend>Search Complaint</legend>
									<div class="span2">
										<label>Field</label>
										<div class="input-control select">
											<select name="field" id="selectSearchField">
												<option value="all">All</option>
												<option value="cid">Complaint Id</option>
												<option value="did">Department Id</option>
												<option value="location">Location</option>
												<option value="uid">User</option>
												<option value="date_submission">date_submission</option>
												<option value="date_resolution">date_resolution</option>
												<option value="description">description</option>
												<option value="status">status</option>
											</select>
										</div>
									</div>
									<div class="span6">
										<label>Value</label>
										<div class="input-control text" data-role="input-control">
											<input name="value1" type="text" placeholder="enter key"
												id="inputLocation">
										</div>
									</div>
									<div class="span1">
										<label>Submit</label> <input class="large" type="submit"
											value="Submit">
									</div>

								</fieldset>
							</form>
						</div>
					</div>



					<div class=grid id="ComplaintList" style="display: none">
						<div class=row>
							<div class="input-control text">
								<input type="text" id="InputCompTableSearch"
									placeholder="search" />
								<button class="btn-search"></button>
							</div>
							<table id="complaintsTable" class="table striped hovered">
								<thead>
									<tr>
										<td>Complaint Id</td>
										<td>Location</td>
										<td>Date</td>
										<td>Description</td>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>



				</div>

			</div>
		</div>
	</div>

	<!-- --------------------------------------------------------------------DISPLAY CONTAINER END --------------------------------------------------->
</body>
</html>